<template>
  <div class="manageKg">
    <div class="filterLeft">
      <el-tabs class="tabs" v-model="activeName"  @tab-click="handleClick">
        <template v-for="(item, index) in tabsData" :key="index">
          <el-tab-pane :label="item.name" :name="item.name">
            <tree-data v-if="item.id == 1" @node-click="nodeClick" :highlight="highlight"></tree-data>
            <event-data ref="eventDom" v-else-if="item.id != 1" :event-data="eventData" :tab-type="activeName" :name="eventParams.name" @onSearch="toSearchList" @on-input="inputChange" @on-page="onEventPage"></event-data>
          </el-tab-pane>
        </template>
      </el-tabs>
    </div>
    <div class="searchRight">
      <div class="searchList">
        <search-data ref="searchDom" :search-data="searchData" :column="columnData" :search-params="searchParams"
                     @row-click="rowClick" @page-load="pageLoad" @delete="deleteData" :switch-show="searchSwitchShow"  ></search-data>
      </div>
      <div :class="isEmpty ? 'emptyDetails' : 'details'">
        <el-empty v-if="isEmpty" :image-size="100"></el-empty>
        <detail-data ref="detailDom" v-show="!isEmpty" :detail-data="detailData" :detail-params="rowId" @on-save="onSave" @on-cancel="detailCancel"></detail-data>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import TreeData from "@/views/manageKg/components/treeData.vue";
import EventData from "@/views/manageKg/components/eventData.vue";
import DetailData, {IDetailData} from "@/views/manageKg/components/detailData.vue";
import SearchData from "@/views/manageKg/components/searchData.vue";
import type { TabsPaneContext } from 'element-plus'
import {deleteEvent, getEventDetail, getEventPage, updateEvent} from "@/api/manageKg/event";
import {deleteEntity, getEntityDetail, getEntityPage, getEntityType, updateEntity} from "@/api/manageKg/entity";
import {
  deleteRelation,
  getEntityPerel,
  getRelationDetail,
  getRelationPage,
  updateRelation
} from "@/api/manageKg/relation";
import {
  deleteCategory,
  getCategoryDetail,
  getCategoryPage,
  updateCategory
} from "@/api/manageKg/classify";
const isEmpty = ref(true)
const detailDom = ref()
const eventDom = ref()
const eventData = ref({})
const highlight = ref(true)
const eventParams = reactive({
  type:1,
  name:'',
  current:1,
  size:15
})
const getEntityTypeApi = (type) => {
  eventParams.type = type
  getEntityType(eventParams).then((res) => {
    if (res.code == 200) {
      eventData.value = res.data
    }
  });
}

const getEntityPerelApi = () => {
  getEntityPerel(eventParams).then((res) => {
    if (res.code == 200) {
      eventData.value = res.data
    }
  })
}

const inputChange = (inputData) => {
  console.log(inputData)
  eventParams.name = inputData.inputData
  switch (activeName.value) {
    case '实体':
      getEntityTypeApi(1)
      break;
    case '事件':
      getEntityTypeApi(2)
      break;
    case '关系':
      getEntityPerelApi()
      break;
    default:
      break;
  }
}

const onEventPage = (page) => {
  eventParams.current = page.currentPage
  switch (activeName.value) {
    case '实体':
      getEntityTypeApi(1)
      break;
    case '事件':
      getEntityTypeApi(2)
      break;
    case '关系':
      getEntityPerelApi()
      break;
    default:
      break;
  }
}

let categoryColumn = reactive([
  {
    label:'知识名称',
    prop:'name',
    search:false,
    sortable:true,
    overHidden:true,
  },
  {
    label:'知识分类',
    prop:'categoryId',
    bind:'categoryName',
    search:false,
    sortable:true
  },
  {
    label:'对象类型',
    prop:'entityType',
    bind:'entityTypeName',
    search:false,
    sortable:true
  }
])
const entityColumn = reactive([
  {
    label:'名称',
    prop:'name',
    search:false,
    sortable:true,
    overHidden:true,
  },
  {
    label:'知识分类',
    prop:'businessTypeId',
    bind:'businessType',
    search:false,
    sortable:true,
  },{
    label:'实体分类',
    prop:'entityType',
    bind:'entityTypeName',
    search:false,
    sortable:true
  },
])
const eventColumn = reactive( [
  {
    label:'名称',
    prop:'name',
    search:false,
    sortable:true,
    overHidden:true,
  },
  {
    label:'知识分类',
    prop:'type',
    bind:'typeName',
    search:false,
    sortable:true,
  },{
    label:'事件分类',
    prop:'code',
    bind:'tagName',
    search:false,
    sortable:true
  }
])
const relationColumn = reactive([
  {
    label:'起点名称',
    prop:'srcName',
    search:false,
    sortable:true,
    overHidden:true,
  }, {
    label:"终点名称",
    prop:'dstName',
    search:false,
    sortable:true,
    overHidden:true,
  },
  {
    label:"关系类型",
    prop:'edge',
    bind:'edgeName',
    search:false,
    sortable:true,
  }
])
const columnData = ref(categoryColumn)
const searchData = ref({})
const searchSwitchShow = ref(false)
let searchParams = reactive(
  {
    code:'',
    current:1,
    size:15,
    name:'',
    columnName:'name',
    sortType:'asc',
    yesOrNo:0
  }
)
const toSearchList = (searchCode) => {
  searchParams.code = searchCode.searchCode
  searchParams.name = ''
  searchParams.current = 1
  isEmpty.value = true
  searchDom.value.onFilterNameClear()
  switch (activeName.value) {
    case '实体':
      getEntityPageAPI( )
      break;
    case '事件':
      getEventPageAPI()
      break;
    case '关系':
      getRelationPageAPI()
      break;
    default:
      break;
  }

}
const getCategoryPageApi = () => {
  getCategoryPage({
    ...searchParams,
  }).then((res) => {
    searchData.value = res.data
  })
}

const getEntityPageAPI = () => {
  delete searchParams.yesOrNo
  getEntityPage({
    ...searchParams,
  }).then((res) => {
    searchData.value = res.data
  })
}
const getEventPageAPI = () => {
  const eventParams = {
    ...searchParams,
    column:searchParams.columnName,
    order:searchParams.sortType
  }
  delete eventParams.columnName
  delete eventParams.sortType
  delete eventParams.yesOrNo
  getEventPage(eventParams).then((res) => {
    searchData.value = res.data
  })
}

const getRelationPageAPI = () => {
  const relationParams = {
    ...searchParams,
    srcName:searchParams.name,
    column:searchParams.columnName == 'name' ? 'srcName' : searchParams.columnName,
    order:searchParams.sortType
  }
  delete relationParams.name
  delete relationParams.yesOrNo
  delete relationParams.columnName
  delete relationParams.sortType
  getRelationPage(relationParams).then((res) => {
    searchData.value = res.data
  })
}

const tabsData = reactive([
    {
      id:1,
      name:'分类',
      isShow:true
    },
    {
      id:2,
      name:'实体',
      isShow:true
    },
    {
      id:3,
      name:'事件',
      isShow:true
    },
    {
      id:4,
      name:'关系',
      isShow:true
    },
  ])
const activeName = ref('分类')
const searchDom = ref()
const handleClick = (tab: TabsPaneContext, event: Event) => {
  activeName.value = tab.props.name as string
  detailData.vid = ''
  detailData.sysName = ''
  detailData.sysCategoryName = ''
  detailData.contentList = []
  detailData.comEntityAttr = {}
  eventParams.name = ''
  searchDom.value.onFilterNameClear()
  searchSwitchShow.value = false
  highlight.value = false
  searchParams = {
    code:'',
    size:15,
    current:1,
    name:'',
    columnName:'name',
    sortType:'asc',
    yesOrNo:0
  }

  isEmpty.value = true
  switch (tab.props.name) {
    case '分类':
      getCategoryPageApi()
      columnData.value = categoryColumn
      break;
    case '实体':
      getEntityTypeApi(1)
      columnData.value = entityColumn
      getEntityPageAPI()
      break;
    case '事件':
      getEntityTypeApi(2)
      getEventPageAPI()
      columnData.value = eventColumn
      break;
    case '关系':
      getEntityPerelApi()
      getRelationPageAPI()
      columnData.value = relationColumn
      break;
    default:
      break;
  }
}
let detailData = reactive<IDetailData>({})

let updateData = reactive<any>({})
const getCategoryDetailAPI = (row) => {
  getCategoryDetail(row.rowRes.vid).then((res) => {
    isEmpty.value = false
    detailDom.value.saveEdit()
    updateData = res.data
    detailData.vid = res.data.vid
    detailData.sysName = res.data.name
    detailData.sysCategoryName = res.data.entityTypeName
    detailData.contentList = res.data.entityAttrList
    detailData.comEntityAttr = res.data.comEntityAttr
  })
}

const getEntityDetailAPI = (row) => {
  getEntityDetail(row.rowRes.vid).then((res) => {
    isEmpty.value = false
    detailDom.value.saveEdit()
    updateData = res.data
    detailData.vid = res.data.vid
    detailData.sysName = res.data.comEntityAttr.sysName
    detailData.sysCategoryName = res.data.comEntityAttr.sysCategoryName
    detailData.contentList = res.data.entityAttrList
    detailData.comEntityAttr = res.data.comEntityAttr

  })
}
const getEventDetailAPI = (row) => {
  getEventDetail({
    vid:row.rowRes.vid,
    code:row.rowRes.code
  }).then((res) => {
    isEmpty.value = false
    detailDom.value.saveEdit()
    updateData = res.data
    detailData.vid = res.data.vid
    detailData.sysName = res.data.comProperties.sysTypeName
    detailData.sysCategoryName = res.data.comProperties.sysCategoryName
    detailData.contentList = res.data.properties
    detailData.comEntityAttr = res.data.comProperties
  })
}
const getRelationDetailAPI = (row) => {
  getRelationDetail({
    rid: row.rowRes.rid,
    edge:row.rowRes.edge
  }).then((res) => {
    isEmpty.value = false
    detailDom.value.saveEdit()
    updateData = res.data
    detailData.vid = row.rowRes.rid
    detailData.sysName = row.rowRes.edgeName
    detailData.sysCategoryName = null
    detailData.contentList = res.data
    detailData.comEntityAttr = null
    detailData.srcName = row.rowRes.srcName
    detailData.dstName = row.rowRes.dstName
  })
}
const rowId = ref()
const rowClick = (row) => {
  rowId.value = row
  switch (activeName.value) {
    case '分类':
      getCategoryDetailAPI(row)
      break;
    case '实体':
      getEntityDetailAPI(row)
      break;
    case '事件':
      getEventDetailAPI(row)
      break
    case '关系':
      getRelationDetailAPI(row)
      break;
    default:
      break;
  }
}

const detailCancel = (row) => {
  console.log('=========',row.detailParams)
  switch (activeName.value) {
    case '分类':
      getCategoryDetailAPI(row.detailParams)
      break;
    case '实体':
      getEntityDetailAPI(row.detailParams)
      break;
    case '事件':
      getEventDetailAPI(row.detailParams)
      break
    case '关系':
      getRelationDetailAPI(row.detailParams)
      break;
    default:
      break;
  }
}

const nodeClick = (nodeData) => {
  searchSwitchShow.value = true
  searchParams.code = nodeData.nodeData.id
  searchParams.current = 1
  searchParams.name = ''
  isEmpty.value = true
  getCategoryPageApi()
}

getCategoryPageApi()
const updateParams = ref({})
const onSave = (formData, context) => {
  switch (activeName.value) {
    case '分类':
      updateParams.value = {
        ...updateData,
        entityAttrList: formData.formData,
        comEntityAttr:{
          ...updateData.comEntityAttr,
          sysCategoryId:formData.comAttrId,
        },
      };
      updateCategory(updateParams.value).then(res => {
        if (res.code == 200) {
          detailDom.value.saveEdit()
          getCategoryDetailAPI(formData.detailParams)
        }
      })
      break;
    case '实体':
      updateParams.value = {
        ...updateData,
        entityAttrList: formData.formData,
        comEntityAttr:{
          ...updateData.comEntityAttr,
          sysCategoryId:formData.comAttrId,
        },

      };
      updateEntity(updateParams.value).then(res => {
        if (res.code == 200) {
          detailDom.value.saveEdit()
          getEntityDetailAPI(formData.detailParams)
        }
      })
      break;
    case '事件':
      updateEvent({
        vid:updateData.vid,
        properties:formData.formData,
        tag:updateData.tag,
        code:updateData.comProperties.sysName,
        comProperties: {
          ...updateData.comProperties,
          sysCategoryId: formData.comAttrId,
        }
      }).then(res => {
        if (res.code == 200) {
          detailDom.value.saveEdit()
          getEventDetailAPI(formData.detailParams)
        }
      })
      break;
    case '关系':
      updateRelation({
        rid:formData.vid,
        properties:formData.formData
      }).then(res => {
        if (res.code == 200) {
          detailDom.value.saveEdit()
          getRelationDetailAPI(formData.detailParams)
        }
      })
      break;
      default:
      break;
  }
}

const pageLoad = (pageData) => {
  searchParams = pageData.pageRes
  switch (activeName.value) {
    case '分类':
      getCategoryPageApi()
      break;
    case '实体':
      getEntityPageAPI()
      break;
    case '事件':
      getEventPageAPI()
      break;
    case '关系':
      getRelationPageAPI()
      break;
    default:
      break;
  }
}

const deleteData = (deleteData) => {
  const vids = deleteData.selectList.map(item => item.vid)
  const deleteVid =  vids.join(',')
  searchParams.current = 1
  switch (activeName.value) {
    case '分类':
      deleteCategory({ids:deleteVid}
      ).then((res) => {
          if(res.code == 200){
            searchDom.value.clearSelection()
            getCategoryPageApi()
          }
      })
      break;
    case '实体':
      deleteEntity({
        ids:deleteVid
      }).then((res) => {
        if(res.code == 200){
          searchDom.value.clearSelection()
          getEntityPageAPI()
        }
      })
      break;
    case '事件':
      deleteEvent({
        vidList:vids
      }).then(res => {
        searchDom.value.clearSelection()
        getEventPageAPI()
      })
      break;
    case '关系':
      deleteRelation({
        ridList:deleteData.selectList.map(item => item.rid)
      }).then(res => {
        searchDom.value.clearSelection()
        getRelationPageAPI()
      })
      break;
  }
}
</script>

<style scoped lang="scss">
  .manageKg {
    display: flex;
    height: 100vh;
    .filterLeft {
      width:15%;
      background-color: white;
      padding: 0px;
      .tabs {
        :deep(.el-tabs__item){
          padding: 0px 10px;
          font-size: 14px;
          font-weight: 400;
        }
      }
    }
    .searchRight {
      width: 85%;
      background-color: white;
      margin-left: 16px;
      display: flex;
      .searchList {
        width: 50%;
        margin: 24px 15px ;
        border-right: solid #EDEFF4 1px;
      }
      .emptyDetails {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .details {
        width: 50%;
      }
    }
  }

</style>
